<template>
  <!-- 通知管理页面 -->
  <div>
    <div class="box">
      <div class="boxin">
        <!-- 头部搜索 -->
        <div class="header">
          <el-input v-model="input1" placeholder="请输入标题关键字"></el-input>
          <el-input v-model="input4" placeholder="请输入内容关键字"></el-input>
          <el-button type="primary" @click="selet">查找</el-button>
          <el-button type="primary" @click="derive">导出</el-button>
        </div>
        <!-- 身体内容 -->
        <div class="bottom">
          <!-- 内容 -->
          <div class="content">
            <div class="right-btn">
              <el-button type="primary" @click="add(1)">添加</el-button
              ><el-button type="danger" @click="deless">批量删除</el-button>
            </div>
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                ref="multipleTable"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  label="通知标题"
                  align="center"
                  prop="id"
                  sortable
                >
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="通知详情'" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit1(scope.$index, scope.row)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column label="通知时间" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.addTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="管理员ID" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.adminId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页 -->
          <div>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </div>
          </div>
          <!-- 添加编辑模态框 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
          >
            <div>
              <div>
                通知标题<el-input
                  v-model="input2"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div>
                通知内容<v-md-editor
                  v-model="text"
                  height="400px"
                ></v-md-editor>
              </div>
              <div></div>
              <div>
                <el-button type="primary" @click="dialogVisible = false"
                  >取消</el-button
                ><el-button type="primary" @click="addok" v-if="flag == 1"
                  >确定</el-button
                >
                <el-button type="primary" @click="addok" v-if="flag == 2"
                  >修改</el-button
                >
              </div>
            </div>
          </el-dialog>
          <!-- 查看模态框 -->
          <el-dialog
            title="查看"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose"
          >
            <span v-html="tan2"></span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible1 = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import { list } from "@/api/xitongguanli/tongzhiguanli";
import { sele } from "@/api/xitongguanli/tongzhiguanli";
import { deles } from "@/api/xitongguanli/tongzhiguanli";
import { add } from "@/api/xitongguanli/tongzhiguanli";
import { addok } from "@/api/xitongguanli/tongzhiguanli";
import { dele } from "@/api/xitongguanli/tongzhiguanli";
export default {
  data() {
    return {
      input1: "", //用户名
      input4: "",
      input2: "", //用户id
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      total: 0,
      currentPage4: 1, //当前页
      pageNum: 10, //每页显示多少条
      inp1: "",
      //模态框
      tableData1: "",
      dialogVisible: false, //模态框显示隐藏
      dialogVisible1: false, //模态框显示隐藏
      input2: "",
      flag: "",
      title: "创建",
      multipleSelection: [],
      text: "", //富文本
      tan2: "", //查看模态框
      a: [], //批量删除数组
    };
  },
  methods: {
    //编辑
    handleEdit(index, row) {
      this.title = "修改";
      console.log(index, row);
      this.tableData1 = row;
      //console.log(this.tableData1);
      this.dialogVisible = true;
      this.flag = 2;
      this.input2 = row.title;
      this.text = row.content;
    },
    //查看
    handleEdit1(index, row) {
      console.log(index, row);
      this.dialogVisible1 = true;
      this.tan2 = row.content;
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //console.log(11111)
        dele(row.addTime, row.adminId, row.content, row.deleted,row.id,row.title,row.updateTime).then((res) => {
          //console.log(res);
          if (res.errmsg == "成功") {
            this.$notify({
              title: "删除成功",
              message: "这是一条成功的提示消息",
              type: "success",
            });
            list(this.currentPage4, this.pageNum).then((res) => {
              if (res.errmsg == "成功") {
                this.tableData = res.data.list;
                this.total = res.data.total;
                console.log(res);
              }
            });
          }
        });
      });
    },
    //分页点击
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          //console.log(res);
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          //console.log(res);
        }
      });
    },
    //查找
    selet() {
      sele(this.currentPage4, this.pageNum, this.input1, this.input4).then(
        (res) => {
          if (res.errmsg == "成功") {
            //console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    //导出
    derive() {
      const tableData = this.tableData; // 如果表格数据为空，提示

      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = ["通知标题", "通知详情", "通知时间", "管理员ID"]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.title || "暂无", // 如果为空，填充为“暂无”
          item.content || "暂无",
          item.addTime || "暂无",
          item.adminId || "暂无",
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "数据列表.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
    resert() {
      this.input1 = "";
      this.input3 = "";
      this.input2 = "";
      this.currentPage4 = 1;
      this.pageNum = 10;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          //console.log(res);
        }
      });
    },
    //模态框点击
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //添加点击
    add(a) {
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.dialogVisible = true;
      this.flag = a;
      this.title = "创建";
    },
    //添加确定编辑修改
    addok() {
      if (this.flag == 1) {
        add(this.text, this.input2).then((res) => {
          if (res.errmsg == "成功") {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            (this.text = ""),
              list(this.currentPage4, this.pageNum).then((res) => {
                if (res.errmsg == "成功") {
                  this.tableData = res.data.list;
                  this.total = res.data.total;
                  //console.log(res);
                }
              });
            this.dialogVisible = false;
          }
        });
      } else {
        addok(
          this.tableData1.addTime,
          this.tableData1.adminId,
          this.text,
          this.tableData1.deleted,
          this.tableData1.id,
          this.input2,
          this.tableData1.updateTime
        ).then((res) => {
          if (res.errmsg == "成功") {
            console.log(res);
            console.log(this.imageUrl);
            this.$message({
              message: "添加成功",
              type: "success",
            });
            list(this.currentPage4, this.pageNum).then((res) => {
              if (res.errmsg == "成功") {
                this.tableData = res.data.list;
                this.total = res.data.total;
                console.log(res);
              }
            });
            this.dialogVisible = false;
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log(this.multipleSelection);
      this.a = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.a.push(this.multipleSelection[i].id);
      }
      //console.log(this.a)
    },
    //批量删除
    deless() {
      if (this.a.length == 0) {
        this.$message({
          message: "请选中",
          type: "warning",
        });
      } else {
        deles(this.a).then((res) => {
          if (res.errmsg == "成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            list(this.currentPage4, this.pageNum).then((res) => {
              if (res.errmsg == "成功") {
                this.tableData = res.data.list;
                this.total = res.data.total;
                console.log(res);
              }
            });
          }
        });
      }
    },
  },
  created() {
    list(this.currentPage4, this.pageNum).then((res) => {
      if (res.errmsg == "成功") {
        this.tableData = res.data.list;
        this.total = res.data.total;
        console.log(res);
      }
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
}
.el-input {
  width: 300px;
}
.img1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #c0c4cc;
}
.xiangqing {
  background-color: #1890ff;
  color: #fff;
}
.block {
  margin: 50px;
}
.tabimg {
  width: 50px;
  height: 50px;
}
.el-tag {
  margin-left: 30px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.right-btn {
  text-align: right;
}
</style>